<template>
  <view class="augur_container">
    <!-- 上半部分 -->
    <view class="operating_area">
      <!-- 准 备 -->
      <view v-if="!readyType" class="ready_model">
        <!-- 按钮 -->
        <button size="mini" type="primary" @click="popupDisplay(1)"> 蓍 草 起 卦 </button>
        <button size="mini" type="primary" @click="popupDisplay(2)"> 铜 钱 起 卦 </button>
      </view>
      <!-- 开始之后的展示内容(蓍草) -->
	  <Yarrow v-if='readyType==1' :yao-step='yaoStep' @setYaoValue='getYaoValue'></Yarrow>
	  <Copper v-if='readyType==2' @setYaoValue='getYaoValue'></Copper>
    </view>
    <!-- 下半部分 -->
    <view class="result_area">
      <!-- 主 -->
      <view class="main_result">
        <text class="_title">主卦</text>
        <!-- 六爻区域 -->
        <view class="yao_area">
          <!-- 每一爻 
            动爻红色，
          -->
          <view v-for="item in resultData" :key="(item.seq+ ''+item.isMove)" class="_yao" :style="{
				backgroundColor: !item.isResult ? 'transparent' : (item.isMove ? 'red' : '#000'),
				border: !item.isResult ? '1px dashed #999' : '0'
			  }">
            <span v-if="!item.value" class="_break" />
          </view>
        </view>
		<view class="_disc">
			<text> {{mainDisc.name||'卦名'}} </text> <br/>
			<text style="color:#999999"> {{mainDisc.disc||'简述'}} </text>
		</view>
      </view>
      <!-- 变 -->
      <view class="change_result">
        <text class="_title">变卦</text>
        <!-- 六爻区域 -->
        <view class="yao_area">
          <!-- 每一爻 
            动爻红色，
          -->
          <view v-for="item in changeData" :key="(item.seq+ ''+item.isMove)" class="_yao" :style="{
				backgroundColor: !item.isResult ? 'transparent' : (item.isMove ? 'red' : '#000'),
				border: !item.isResult ? '1px dashed #999' : '0'
			  }">
            <span v-if="!item.value" class="_break" />
          </view>
        </view>
		<view class="_disc">
			<text> {{changeDisc.name||'卦名'}} </text> <br/>
			<text style="color:#999999"> {{changeDisc.disc||'简述'}} </text>
		</view>
      </view>
	  <text type="primary" class="bottom_btn" :class="{'has_result':hasResult}" @click="getDetails">查 看 详 解</text>
    </view>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" title="无事不占,非诚不灵.建议输入所占事项!" mode="input" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
  </view>
</template>
<script>
import {baseData} from '@/utils'
import Yarrow from './components/Yarrow/index.vue'
import Copper from './components/Copper/index.vue'
export default {
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	    return {
	      title: '六爻占卜-地山谦卦',
		  imageUrl:'./../../static/dishanqian.png',
	      path: '/pages/index/index'
	    }
	  },
	components:{
		Yarrow,
		Copper
	},
  data() {
    return {
      readyType: 0, // 0未选占卜类型，1是蓍草占卜，2是铜钱占卜
	  userEvent:'',
      yaoStep: 1, // 第几爻
      // 占卦结果
      resultData: [
        {
          seq: 1,
          value: true, // 阳true，阴false
          isMove: true, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
          isResult: false // true :是已经算出结果，false未出结果，补位作用
        },
        {
          seq: 2,
          value: true, // 阳true，阴false
          isMove: true, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
        },
        {
          seq: 3,
          value: true, // 阳true，阴false
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
        },
        {
          seq: 4,
          value: false, // 阳true，阴false
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
        },
        {
          seq: 5,
          value: false, // 阳true，阴false
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
        },
        {
          seq: 6,
          value: false, // 阳true，阴false
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
        }
      ],
      // 全部6爻完成后才会算出变卦
      changeData: [
        {
          seq: 1,
          value: true, // 阳true，阴false
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
          isResult: false // true :是已经算出结果，false未出结果，补位作用
        },
        {
          seq: 2,
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
          value: true, // 阳true，阴false
        },
        {
          seq: 3,
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
          value: true, // 阳true，阴false
        },
        {
          seq: 4,
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
          value: false, // 阳true，阴false
        },
        {
          seq: 5,
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
          value: false, // 阳true，阴false
        },
        {
          seq: 6,
          isMove: false, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
          value: false, // 阳true，阴false
        }
      ],
	  changeDisc:{},
	  mainDisc:{},
	  hasResult:false
    }
  },
  methods: {
	popupDisplay(type){
		this.userEvent = ''
		this.readyType = type
		this.readyGo()
		this.$refs.alertDialog.open()
	},
    readyGo() {
      this.resultData = [{ seq: 1 }, { seq: 2 }, { seq: 3 }, { seq: 4 }, { seq: 5 }, { seq: 6 }]
      this.changeData = [{ seq: 1 }, { seq: 2 }, { seq: 3 }, { seq: 4 }, { seq: 5 }, { seq: 6 }]
	  this.mainDisc={}
	  this.changeDisc={}
	  this.hasResult = false
    },
	dialogConfirm(value) {
		console.log(value)
		this.userEvent = value
		// this.readyGo()
	},
	dialogClose(){
		this.readyType = 0
	},
	getDetails(){
		// if(!this.hasResult){
		// 	uni.showToast({
		// 		title: '请先占完此卦',
		// 		icon:'error',
		// 		duration: 2000
		// 	})
		// 	return
		// }
		uni.navigateTo({
			// url:`../interpreting/index?main=1&change=2&userEvent=3`,
			url:`../interpreting/index?main=${this.mainDisc.name}&change=${this.changeDisc.name}&userEvent=${this.userEvent}`,
		})
	},
    getYaoValue({value,isMove}) {
      this.$set(this.resultData, this.yaoStep - 1, {
        seq: this.yaoStep, 
        value,
		isMove,
		isResult: true // true :是已经算出结果，false未出结果，补位作用
      })
	  if (this.yaoStep >= 6) {
	    this.yaoStep = 1
	    var mainAttr = ''
	    var changeAttr = ''
	    this.changeData = this.resultData.map(item => {
	  	mainAttr+=Number(item.value)
	      if (item.isMove) {
	  	  changeAttr+=Number(!item.value)
	        return {
	          ...item,
	          value: !item.value
	        }
	      } else {
	  	  changeAttr+=Number(item.value)
	        return { ...item }
	      }
	    })
	  	// 直接计算出卦名
	    this.mainDisc=baseData[mainAttr]
	    this.changeDisc=baseData[changeAttr]
	    this.hasResult = true
	    this.readyType = 0
	    // this.messageText = "解卦复杂，功能正在开发，请结合卦象和所占之事 自行解卦..."
	    // this.$refs.message.open()
	  } else {
	    this.yaoStep++
	  }
    }
  }
}
</script>
<style lang='scss'>
uni-page-body,page,.augur_container{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	.operating_area{
		position: relative;
		width: 100%;
		height: 62%;
		.ready_model{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.3, #fff),  color-stop(0.8, #000));
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			z-index: 10;
		}
	} 
	.result_area{
		height: 38%;
		box-sizing: border-box;
		border-top: 1px dashed #666 ;
		position: relative;
		display: flex;
		.main_result,.change_result{
			box-sizing: border-box;
			padding: 10px 0;
			width: 50%;
			height: calc(100% - 50px);
			line-height: 20px;
			text-align: center;
			._title{
				width: 100%;
				text-align: center;
				height: 20px;
			}
			._disc{
				box-sizing: border-box;
				width: 100%;
				height: 50px;
				text-align: center;
				padding: 0px 20px;
				font-size: 10px;
				color: #3A3A3A;
			}
			.yao_area{
				/* width: 100%; */
				box-sizing: border-box;
				height: calc(100% - 70px);
				padding: 10px 35px;
				display: flex;
				flex-direction: column-reverse;
				justify-content: space-between;
					._yao{
						position: relative;
						box-sizing: border-box;
						width: 100%;
						height: 7px;
					._break{
						position: absolute;
						background-color: #fff;
						width: 16px;
						height: 100%;
						left: 50%;
						top: 0;
						margin-left: -8px;
					}
				}
			}
		}
		.bottom_btn{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background-color: #B9B9B9;
			text-align: center;
			color: #fff;
			font-size:12px;
			&.has_result{
				background-color: #4CD964;
			}
		}
	}
}
</style>
